<template>
  <div class="vid">
    <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto">
      <source :src="videoUrl" type="video/mp4" />
    </video>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps, PropType } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
const props = defineProps({
  videoUrl: {
    type: String as PropType<string>,
  },
});
//视频文件链接
// const videoUrl = ref("//vjs.zencdn.net/v/oceans.mp4");

onMounted(() => {
  videojs(document.querySelector(".video-js")!, {
    sources: [
      {
        src: props.videoUrl,
        type: "video/mp4",
      },
    ],
    //播放速度
    playbackRates: [0.5, 1, 1.5, 2],
    //加载热键
    userActions: {
      hotkeys: {},
    },
  });
});
</script>
<style>
.vid {
  overflow: hidden;
  width: 100%;

  border-radius: 15px;
}
.video-js {
  width: 100%;
  height: 0; /* 高度设置为0 */
  padding-bottom: 56.5%; /* 下填充为百分比，等于宽度 */
}
</style>
